<template>
  <div class="products-container">
    <div class="header">
      <h2>商品浏览</h2>
      <div class="filters">
        <el-input
          v-model="searchQuery"
          placeholder="搜索商品..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="selectedCategory" placeholder="选择分类" class="category-select">
          <el-option label="全部" value="全部" />
          <el-option label="水果" value="水果" />
          <el-option label="蔬菜" value="蔬菜" />
          <el-option label="肉类" value="肉类" />
          <el-option label="海鲜" value="海鲜" />
        </el-select>
      </div>
    </div>

    <el-empty v-if="loading" description="加载中...">
      <el-icon class="is-loading"><Loading /></el-icon>
    </el-empty>

    <el-alert
      v-else-if="error"
      :title="error"
      type="error"
      show-icon
    />

    <div v-else class="products-grid">
      <el-card v-for="product in filteredProducts" :key="product.id" class="product-card">
        <template #header>
          <div class="product-header">
            <h3>{{ product.name }}</h3>
            <el-tag :type="getCategoryType(product.category)">
              {{ product.category }}
            </el-tag>
          </div>
        </template>
        
        <div class="product-content">
          <div class="product-info">
            <p class="price">¥{{ product.price }}/{{ product.unit }}</p>
            <p class="supplier">供应商：{{ product.supplier }}</p>
            <p class="description">{{ product.description }}</p>
            <div class="stock-info">
              <el-tag :type="getStockStatusType(product.stock)">
                库存: {{ product.stock }}{{ product.unit }}
              </el-tag>
              <el-tag type="info">
                到期日: {{ formatDate(product.expiryDate) }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Loading } from '@element-plus/icons-vue'
import { useCustomerProductStore } from '@/stores/customerProductStore'
import { ElMessage } from 'element-plus'

const customerProductStore = useCustomerProductStore()
const searchQuery = ref('')
const selectedCategory = ref('全部')
const loading = computed(() => customerProductStore.loading)
const error = computed(() => customerProductStore.error)

const filteredProducts = computed(() => {
  let products = customerProductStore.getProductsByCategory(selectedCategory.value)
  if (searchQuery.value) {
    products = products.filter(product => 
      product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      product.description.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      product.supplier.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  return products
})

const getCategoryType = (category) => {
  const types = {
    '水果': 'success',
    '蔬菜': 'info',
    '肉类': 'danger',
    '海鲜': 'warning'
  }
  return types[category] || 'info'
}

const getStockStatusType = (stock) => {
  if (stock <= 0) return 'danger'
  if (stock < 100) return 'warning'
  return 'success'
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

onMounted(async () => {
  try {
    await customerProductStore.initialize()
  } catch (error) {
    ElMessage.error('加载商品数据失败')
  }
})
</script>

<style scoped>
.products-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin-bottom: 20px;
  color: #303133;
}

.filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.category-select {
  width: 150px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.product-card {
  height: 100%;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.product-content {
  padding: 10px 0;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
  margin: 0;
}

.supplier {
  color: #606266;
  margin: 0;
}

.description {
  color: #606266;
  margin: 0;
  font-size: 14px;
}

.stock-info {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
</style> 